<template>
	<el-menu class="diyscrollbar" :default-active="onRoutes" @select="handleSelect" router>
    <el-menu-item index="Home">
      <i class="el-icon-setting"></i>首页
    </el-menu-item>
    <el-menu-item index="Check">
      <i class="el-icon-setting"></i>区块链校验
    </el-menu-item>
    <el-menu-item index="UserCenter">
      <i class="el-icon-setting"></i>账户管理
    </el-menu-item>
		<el-submenu index="content">
			<template slot="title">
				<i class="el-icon-menu"></i>一级菜单1
			</template>
			<el-menu-item index="content2">二级菜单1</el-menu-item>
		</el-submenu>
		<el-menu-item index="content3">
			<i class="el-icon-setting"></i>一级菜单2
		</el-menu-item>
		<el-menu-item index="content4">
			<i class="el-icon-document"></i>一级菜单3
		</el-menu-item>
		<el-menu-item index="content5">
			<i class="el-icon-star-on"></i>一级菜单4
		</el-menu-item>
	</el-menu>
</template>

<script>
export default {
  name: 'Sidebar',
  computed: {
    onRoutes () {
      return this.$route.path.replace('/', '')
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      // eslint-disable-next-line camelcase
      var key_arr = {
        content: '一级菜单1',
        Home: '首页',
        Check: '区块链校验',
        UserCenter: '账户管理',
        content2: '二级菜单1',
        content3: '一级菜单2',
        content4: '一级菜单3',
        content5: '一级菜单4'
      }
      // eslint-disable-next-line camelcase
      var text_arr = []
      for (var i = 0, l = keyPath.length; i < l; i++) {
        text_arr.push(key_arr[keyPath[i]])
      }
      this.$emit('SetBreadcrumb', text_arr)
    }
  }
}
</script>

<style>
	.el-menu {
		background-color: white!important;
		overflow: auto;
	}
</style>
